<template>
  <div>
    <el-card shadow="never" :style="{height: documentHeight + 'px', overflow:'auto' }">
      <el-button size="mini" type="primary" @click="querydata()">查询</el-button>
      <el-button size="mini" type="primary" @click="addusername()">新增</el-button>
      <table-change @change="tableSize = $event" style="float: right;" />
      <el-table
        :height="documentHeight-181"
        :size="tableSize"
        :cell-style="({ column })=>column.type==='index'&&'color:#999999'"
        :data="tableData"
        row-key="id"
        style="width: 100%;margin-top: 10px">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          prop="username"
          align="center"
          label="用户名"
          min-width="100">
        </el-table-column>
        <el-table-column
          prop="usercname"
          align="center"
          label="中文名"
          min-width="100">
        </el-table-column>
        <el-table-column
          prop="userType"
          align="center"
          label="用户类型"
          min-width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.userType==='1'">普通用户</span>
            <span v-if="scope.row.userType==='2'">超级用户</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          header-align="center"
          label="操作"
          align="center"
          fixed="right"
          min-width="180">
          <template slot-scope="scope">
            <el-link :click-change-color="true" :underline="false" style="margin-left: 5px"
                     @click="editUser(scope.row)" type="primary">编辑
            </el-link>
            <span style="margin-left: 5px;color:#CCCCCC">|</span>
            <el-link :underline="false" style="margin-left: 5px" @click="resetPassword(scope.row)" type="primary">
              重置密码
            </el-link>
            <span style="margin-left: 5px;color:#CCCCCC">|</span>
            <el-link :underline="false" style="margin-left: 5px" @click="deleteUser(scope.row)" type="primary">
              删除
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 5px;float: right"
        small
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size=pagesize
        :page-sizes="[10, 20, 30, 50]"
        layout="total,prev, sizes,pager, next,jumper"
        :total=total>
      </el-pagination>
    </el-card>
    <el-dialog width="30%" :title="title" :visible.sync="addVisible">
      <el-form ref="addform" :rules="rules" :model="addform">
        <el-form-item label="用户名：" label-width="100px" prop="username">
          <el-input style="width:90%" placeholder="请输入用户名" size="mini" v-model="addform.username"
                    autocomplete="off"></el-input>
        </el-form-item>
<!--        <el-form-item label="中文名：" label-width="100px" prop="username">-->
<!--          <el-input style="width:90%" placeholder="请输入中文名" size="mini" v-model="addform.usercname"-->
<!--                    autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label="中文名：" label-width="100px" prop="username">
          <el-input style="width:90%" placeholder="请输入中文名" size="mini" v-model="addform.usercname"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户类型：" label-width="100px" prop="userType">
          <el-select filterable style="width: 90%" size="mini" v-model="addform.userType"
                     placeholder="请选择用户类型">
            <el-option label="普通用户" value="1"></el-option>
            <el-option label="超级用户" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="默认主题：" label-width="100px" prop="defaultSubject">
          <el-select filterable style="width: 90%" size="mini" v-model="addform.defaultSubject"
                     placeholder="请选择主题">
            <el-option
              v-for="item in zhutiOption"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <span v-if="title==='新增用户'" style="margin-left:100px;color:#F56C6C">初始密码123456</span>
        <!--        <el-form-item label="" label-width="100px">-->

        <!--        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="addVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="addSure()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ElOption from "@/components/select/src/option.vue";

export default {
  name: "demo1",
  components: { ElOption },
  data() {
    return {
      tableSize: "",
      title: "",
      tableData: [],
      currentPage: 1,
      pagesize: 30,
      total: 0,
      addVisible: false,
      addform: {
        username: "",
        userType: "1",
        usercname: "",
        password: "",
        password1: "",
        defaultSubject: ""
      },
      zhutiOption: [],
      rules: {
        password: [
          { required: true, message: "请输入密码", trigger: "blur" }
        ],
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password1: [
          { required: true, message: "请输入确认密码", trigger: "blur" }
        ],
        userType: [
          { required: true, message: "请选择用户类型", trigger: "change" }
        ],
        defaultSubject: [
          { required: true, message: "请选择主题", trigger: "change" }
        ]
      }
    };
  },
  methods: {
    addusername() {
      this.title = "新增用户";
      this.addform = {};
      this.addform.userType = "1";
      this.addVisible = true;
      this.$refs.addform.resetFields();
    },
    querydata() {
      let querydata = {
        pageSize: this.pagesize,
        pageNum: this.currentPage,
        param: {}
      };
      this.$http.post("/sysUser/findSysUserPage", querydata).then((res) => {
        this.tableData = res.data.list;
        this.total = res.data.total;
      }).finally(() => {

      });
    },
    addSure() {
      // if (this.addform.password !== this.addform.password1) {
      //   return this.$message.error("两次密码不一致");
      // }
      this.$refs.addform.validate((valid) => {
        if (valid) {
          if (this.title === "新增用户") {
            let query = {
              username: this.addform.username,
              password: this.addform.password,
              defaultSubject: this.addform.defaultSubject,
              usercname: this.addform.usercname,
              userType: this.addform.userType
            };
            this.$http.post("/sysUser/addSysUser", query).then((res) => {
              if (res.code === "200") {
                this.$message.success("新增成功");
              }
            }).finally(() => {
              this.addVisible = false;
              this.querydata();
            });
          } else {
            let query = {
              id: this.rowid,
              username: this.addform.username,
              password: this.addform.password,
              defaultSubject: this.addform.defaultSubject,
              usercname: this.addform.usercname,
              userType: this.addform.userType
            };
            this.$http.post("/sysUser/modifySysUser", query).then((res) => {
              if (res.code === "200") {
                this.$message.success("修改成功");
              }
            }).finally(() => {
              this.addVisible = false;
              this.querydata();
            });
          }
        }
      });
    },
    editUser(data) {
      this.addform = JSON.parse(JSON.stringify(data));
      this.rowid = data.id;
      this.addVisible = true;
      this.title = "编辑用户";
    },
    resetPassword(row) {
      this.$confirm(`是否重置${row.username}的密码？初始密码123456`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let data = {
          id: row.id
        };
        this.$http.post("/sysUser/resetPassword", data).then((data) => {
          if (data.code === "200") {
            this.$message.success("重置成功");
          } else {
            this.$message.error("重置失败");
          }
        }).finally(() => {
          this.querydata();
        });
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消重置"
        });
      });
    },
    deleteUser(row) {
      this.$confirm(`是否删除${row.username}？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let data = {
          id: row.id
        };
        this.$http.post("/sysUser/deleteSysUser", data).then((data) => {
          if (data.code === "200") {
            this.$message.success("删除成功");
          } else {
            this.$message.error("删除失败");
          }
        }).finally(() => {
          this.querydata();
        });
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除"
        });
      });
    },
    handleSizeChange(val) {
      this.pagesize = val;
      this.querydata();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.querydata();
    },
    getzhuti() {
      this.$http.post("/sysUser/findSubject").then((res) => {
        this.zhutiOption = res.data;
      });
    }
  },
  computed: {
    documentHeight() {
      return this.$store.getters.documentHeight;
    },
    lastHeight() {
      return this.documentHeight - 220;
    }
  },
  created() {
    this.querydata();
    this.getzhuti();
  }

};
</script>

<style scoped>
::v-deep .el-card__body {
    padding-top: 5px;
}
</style>
